<template>
  <div id="mapContainer">
    <PIEDataCollect :selectList="buttonName" :tableData="tableData1" :fields="fields" class="pie-table"
      :mainTitle="'实时数据服务子系统'">
    </PIEDataCollect>
  </div>
</template>

<script lang="ts" setup>
import {
  reactive,
  onMounted,
  toRefs,
  getCurrentInstance,
} from "vue";
import baseMap from '@/plugins/lib/baseMaps'
onMounted(() => { initMap() })
let baseMapObj: any = null
let map: any = null
// 初始化地图
const initMap = () => {
  baseMapObj = new baseMap({
    container: "mapContainer",
    zoom: 3,
    // center: [123.31054687499999, 36.38591277287651],
  });

  map = baseMapObj.map;
  map.on("load", function () {
    // addAreaString();
    // addPointString();
  });
}
let buttonName = [
  { value: "接收配置", label: "接收配置" },
  { value: "任务管理", label: "任务管理" },
  { value: "数据查询", label: "数据查询" },
  // { value: "数据查询", label: "微服务管理" },
]; //按钮标题
let tableData1 = [
  {
    name: "国外地震001",
    status: "0",
    load: 200,
    load1: 300,
    percent: '20%'
  },
  {
    name: "国外地震002",
    status: "1",
    load: 200,
    load1: 300,
    percent: '20%'
  },
  {
    name: "国外地震002",
    status: "0",
    load: 200,
    load1: 300,
    percent: '20%'
  },
  {
    name: "国外地震002",
    status: "0",
    load: 200,
    load1: 300,
    percent: '20%'
  },
  {
    name: "国外地震002",
    status: "0",
    load: 200,
    load1: 300,
    percent: '20%'
  },
  {
    name: "国外地震002",
    status: "0",
    load: 200,
    load1: 300,
    percent: '20%'
  },
  {
    name: "国外地震001",
    status: "0",
    load: 200,
    load1: 300,
    percent: '20%'
  },
  {
    name: "国外地震001",
    status: "0",
    load: 200,
    load1: 300,
    percent: '20%'
  },
  {
    name: "国外地震001",
    status: "0",
    load: 200,
    load1: 300,
    percent: '20%'
  },
  {
    name: "国外地震001",
    status: "0",
    load: 200,
    load1: 300,
    percent: '20%'
  },
  {
    name: "国外地震001",
    status: "0",
    load: 200,
    load1: 300,
    percent: '20%'
  },
  {
    name: "国外地震001",
    status: "0",
    load: 200,
    load1: 300,
    percent: '20%'
  },
  {
    name: "国外地震001",
    status: "0",
    load: 200,
    load1: 300,
    percent: '20%'
  },
  {
    name: "国外地震001",
    status: "0",
    load: 200,
    load1: 300,
    percent: '20%'
  },
]; //表格数据
let fields = [
  { label: "配置", prop: "name" },
  {
    label: "状态", prop: "status",
    isTemplate: true
  },
  { label: "实发数据", prop: "percent" },
  { label: "应发数据", prop: "load1" },
  { label: "应发比例", prop: "load" },
]; //表头
</script>

<style lang="less" scoped>
#mapContainer {
  width: 100%;
  height: 100%;
  position: relative;

  .pie-table {
    position: absolute;
    top: @global-margin;
    left: @global-margin;
    bottom: 50px;
  }

  :deep .el-table th.el-table__cell>.cell {
    width: 100px;
  }
}
</style>